<template>
  <div class="login" :style="'background-image:url('+loginBg+')'">
    <canvas id="canvas" width="900" height="300" style="position: fixed;top: -50px;width: 900px;left: 50%;transform: translateX(-50%);"></canvas>
    <div class="container">
      <div class="pic"><img :src="loginLogo" alt="" ></div>
      <a-form-model ref="formLogin" :model="form" :label-col="labelCol" :rules="rules" :wrapper-col="wrapperCol">
        <a-form-model-item prop="username">
          <a-input v-model="form.username" placeholder="请输入用户名">
            <a-icon type="user" slot="prefix"/>
          </a-input>
        </a-form-model-item>
        <a-form-model-item prop="password">
          <a-input-password v-model="form.password" placeholder="请输入密码">
            <a-icon type="lock" slot="prefix" />
          </a-input-password>
        </a-form-model-item>
        <a-form-model-item prop="btn">
          <a-button type="primary" block @click="loginIn">登入</a-button>
        </a-form-model-item>
      </a-form-model>
    </div>
  </div>
</template>

<script>
import request from 'api/request'
import createCanvas from 'public/js/loginCanvas.js'
import creategt from 'public/js/gt.js'
import loginBg from 'public/images/loginbg.jpg'
import loginLogo from 'public/images/loginLogo.png'
export default {
  components:{
  },
  data() {
    return {
      loginBg,
      loginLogo,
      labelCol: {span: 3},
      wrapperCol: {span: 24, offset: 0},
      form:{
        username:'admin',
        password:'admin888'
      },
      rules:{
        username:[{required:true,message:'请输入用户名',trigger:'blur'}],
        password:[{required:true,message:'请输入密码',trigger:'blur'}]
      },
      captchaObj:null
    }
  },
  mounted() {
    createCanvas('VKADMIN')
    creategt(window)
    this.initGt()
  },
  destroyed() {
    console.log('destroyed')
    // this.$store.commit('admin/checkLogin')  // 离开login页面时，判断是否登入
  },
  methods: {
    initGt:function(){
      const that = this
      request.get("/gt/register").then(e=>{
        initGeetest({
            // 省略必须的配置参数
            gt:e.gt,
            challenge:e.challenge,
            offline:!e.success,
            new_captcha:e.new_captcha,
            product: 'bind'
        }, function(captchaObj){
            captchaObj.onReady(function(){
                //验证码ready之后才能调用verify方法显示验证码
            }).onSuccess(function(){
              let result = captchaObj.getValidate()
              let data = {
                geetest_challenge:result.geetest_challenge,
                geetest_seccode:result.geetest_seccode,
                geetest_validate:result.geetest_validate
              }
              if (!result) {
                return alert('请完成验证');
              }
              request.post("/gt/validate",data).then(e=>{
                if(e.result === "success"){  //极验证完成=>进行登入操作
                  let loginData = that.form
                  request.post("/login",loginData).then(e=>{
                    if(e.status == 200){
                      that.$message.success('登入成功')
                      that.$store.commit('admin/setUserInfo',e.data[0])
                      that.$store.commit('menu/eachTag')
                      // that.$router.push({
                      //   path:'/admin'
                      // })
                    }else{
                      that.$message.warn(e.msg)
                    }
                  })
                }
              })
            }).onError(function(){
              console.log('err')
                //your code
            })
            that.captchaObj = captchaObj
        });
      })
    },
    loginIn:function(){
      this.$refs.formLogin.validate(valid => {
        if (valid) {
          this.captchaObj.verify()
        } else {
          return false;
        }
      })
    }
  },
}
</script>

<style scoped>
  .login{
    width: 100%;
    height: 100vh;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    overflow: hidden;
  }
  .login .container{
    width: 400px;
    margin: 30vh auto 0;
    padding: 0 40px 32px 40px;
    background: #ffffff;
    border-radius: 6px;
    overflow: hidden;
  }
  .login .container .pic{
    width: 200px;
    margin: 30px auto;
  }
</style>